<template>
    <div id="content2" class="site-content">
        <div class="post-list" data-v-308f9f9e="">
            <div>
                <article :key="index" v-for="(item,index) of articles" class="post card-box "
                         :class="(index+1)%2==0?'post-right':'post-left'">
                    <div class="post-thumb">
                        <router-link  v-if="item.cover" :to="{name:'article',query:{_id:item._id}}">
                            <img
                                 :src="item.cover"
                                 class="lazyload"></router-link>
                        <!--<router-link  v-if="item.cover" :to="{name:'article',query:{_id:item._id}}">-->
                            <!--<img onerror="imgError(this,3)"-->
                                 <!--:src="item.cover"-->
                                 <!--class="lazyload"></router-link>-->
                    </div>
                    <div class="title-wrapper">
                        <div class="post-date" style="color:#888;font-size:12px;margin-bottom:15px;"><i
                                class="iconfont icon-riqi"></i>{{item.date}}
                        </div>
                        <h3 style="margin-bottom:15px;">
                            <router-link :to="{name:'article',query:{_id:item._id}}" class="">{{item.title}}
                            </router-link>
                        </h3>
                        <div class="article-info" style="margin-bottom:15px;"></div>
                        <div class="float-content"><p>{{item.description}}</p>
                            <div class="post-bottom"><i
                                    class="iconfont icon-caidan"></i></div>
                        </div>
                        <i @click="delte_article(item._id)" v-if="$store.state.admin" class="el-icon-delete" style="position: absolute;bottom: 20px;"></i>
                    </div>
                    </article>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "content2",
        data() {
            return {
                articles: [],
                skypegmwcn_article: this.$cloudbase.database().collection('skypegmwcn_article')
            }
        },
        async created() {
            let that = this
            await this.skypegmwcn_article.orderBy('date','desc').watch({
                onChange(res){
                    that.articles = res.docs
                }
            })
        },
        methods:{
            delte_article(id){

                this.$confirm('此操作将永久删除该文章，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    this.$message.success({
                        message:'删除成功',
                        center:true
                    })
                    this.skypegmwcn_article.doc(id).remove()
                }).catch(()=>{
                })
            }
        }
    }
</script>

<style lang='stylus'>
    .el-icon-delete
        &:hover
            &::before
                content "\e7c9"

    #content2 {
        padding: 20px 10px;
    }

    .float-content
        width 100%
        color rgba(0, 0, 0, .66)
        p
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 66.5px;
            overflow: hidden;
            text-overflow ellipsis

    .post-thumb
        width 55%;
        a
            height: 300px;
            position: relative;
            display: block;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
            img
                width: 100%;
                height: 100%;
                object-fit: cover;
                pointer-events: none;
                transition: all .6s;

    .post-list
        margin-bottom 4rem
        p
            margin 0
        .post-left
            justify-content flex-end
            .title-wrapper
                order 1
                padding-right: 30px;
                padding-left: 0;
                text-align: left;
                margin: 20px 0 10px 10px;
            .post-thumb
                order 2
                a
                    border-radius 0 10px 10px 0
        .post-right
            justify-content flex-start
            .title-wrapper
                order 2
                padding-left: 30px;
                padding-right: 0;
                text-align: right;
                margin: 20px 10px 10px 0;
            .post-thumb
                order 1
                a
                    border-radius 10px 0 0 10px
        .post
            border-radius 10px
            box-shadow 0 1px 20px -6px rgba(0, 0, 0, .5)
            position relative
            /*padding 1rem 1.5rem*/
            margin-bottom 3rem
            transition all 0.3s
            display flex
            &:hover
                box-shadow 0 5px 10px 5px rgba(110, 110, 110, .4)
                img
                    transform scale(1.1)
            &.post-leave-active
                display none
            &.post-enter
                opacity 0
                transform translateX(-20px)
            &::before
                position absolute
                top -1px
                right 0
                font-size 2.5rem
                color $activeColor
                opacity 0.85
            .title-wrapper
                width 40%
                a
                    color var(--textColor)
                    &:hover
                        color $accentColor
                h2
                    margin 0.5rem 0
                    font-size 1.4rem
                    border none
                    a
                        @media (max-width $MQMobile)
                            font-weight 400
                .article-info
                    > a, > span
                        opacity 0.7
                        font-size 0.8rem
                        cursor pointer
                        &::before
                            margin-right 0.3rem
                        a
                            margin 0
                            &:not(:first-child)
                                &::before
                                    content '/'
                    .tags a:not(:first-child)::before
                        content '、'
            .excerpt-wrapper
                border-top 1px solid var(--borderColor)
                margin 0.5rem 0
                overflow hidden
                .excerpt
                    margin-bottom 0.3rem
                    font-size 0.92rem
                    h1, h2, h3
                        display none
                    img
                        max-height 280px
                        max-width 100% !important
                        margin 0 auto
                .readmore
                    float right
                    margin-right 1rem
                    line-height 1rem
                    &::before
                        float right
                        font-size 0.8rem
                        margin 0.1rem 0 0 0.2rem
</style>